<template>
  <div class="goods-item">
    <div
      class="item"
      v-for="item in goods"
      :key="item.id"
      @click="showGood(item)"
    >
      <div class="item-detail">
        <img :src="item.src" alt="" />
        <div class="desc">
          <template><span v-if="item.status === 1">yx超市</span></template
          >{{ item.text }}
        </div>
        <div class="price">
          <span class="new-price">￥{{ item.price }}.00</span>
          <!-- <span class="old-price">
            <del>￥{{ item.GoodPriceaftersale }}</del>
          </span> -->
        </div>
        <p class="same">
          <span>{{ item.count }}条评论</span><span>看相似</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        {
          id: 1,
          src: require("@/assets/img/goods/1.webp"),
          text: "CGVS睡衣女士棉春秋季薄款套头家居服可爱少sadsadas女卡通学生居家长袖套装 YS5251 M（建议身高150-156 体重80-100）",
          price: 188,
          count: "17",
          status: 1,
        },
        {
          id: 2,
          src: require("@/assets/img/goods/2.webp"),
          text: "云米（VIOMI）1.5匹智能家电 变频冷暖Space E AI全域风 新一级以旧换新 壁挂式挂机空调KFRd-35GW/Y2QX2-A1",
          price: 4888,
          count: "18万",
        },
        {
          id: 3,
          src: require("@/assets/img/goods/3.webp"),
          text: "红毛丹罐头 泰双象 2罐 新鲜毛荔枝双象红毛丹糖水果罐头儿时记忆 红毛丹2罐",
          price: 288,
          count: "1万+",
          status: 1,
        },
        {
          id: 4,
          src: require("@/assets/img/goods/4.webp"),
          text: "海尔（Haier）冰箱 467升一级能效双变频风冷无霜十字对开门四开门多门家用超薄省电大容量电冰箱",
          price: 6999,
          count: "1000+",
        },
        {
          id: 5,
          src: require("@/assets/img/goods/5.webp"),
          text: "omto托特包女包小众单肩大容量上课通勤大包百搭手提包女 松露黑中号【底托一起发】",
          price: 2586,
          count: "50万+",
          status: 1,
        },
        {
          id: 6,
          src: require("@/assets/img/goods/6.webp"),
          text: "华凌冰箱 549升白色对开门双开门家用超薄冰箱 一级能效双变频风冷无霜WiFi智能家用大容量冰箱BCD-549WKPZH",
          price: 5999,
          count: "500+",
        },
        {
          id: 7,
          src: require("@/assets/img/goods/7.webp"),
          text: "罗技（Logitech）MX Master 3S 鼠标 无线蓝牙鼠标 办公鼠标 右手鼠标  石墨黑  带Logi Bolt无线接收器",
          price: 499,
          count: "1万+",
          status: 1,
        },
        {
          id: 8,
          src: require("@/assets/img/goods/8.webp"),
          text: "蒙牛 特仑苏 纯牛奶250ml*16每100ml含3.6g优质蛋白质 礼盒装 品质好礼",
          price: 49,
          count: "900+",
          status: 1,
        },
        {
          id: 9,
          src: require("@/assets/img/goods/9.webp"),
          text: "良品铺子 黑麦全麦面包1000g/箱 早餐粗粮低脂健身代餐全麦面包膳食纤维零蔗糖面包点心吐司零食整箱装",
          price: 39,
          count: "100+",
          status: 1,
        },
        {
          id: 10,
          src: require("@/assets/img/goods/10.webp"),
          text: "闪魔 苹果14钢化膜 iphone14手机膜 22年新款苹果高清抗指纹防刮保护抗蓝光防窥贴膜 【14^加强版】2片+神器 无黑边",
          price: 18,
          count: "300+",
        },
      ],
    };
  },
  methods: {
    showGood(item) {
      this.$router.push({
        name: "goodsdetail",
        query: {
          id: item.id,
          src: item.src,
          price: item.price,
          text: item.text,
        },
      });
    },
  },
};
</script>

<style scoped>
.goods-item {
  width: 369px;
  display: flex;
  align-content: flex-start;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.goods-item .item {
  width: 170px;
  /* height: 280px; */
  border: 1px solid rgb(218, 218, 218);
  border-radius: 5px;
  margin-bottom: 10px;
}
.goods-item .item .item-detail {
  width: 100%;
}
.goods-item .item .item-detail img {
  width: 170px;
  height: 170px;
}
.desc {
  width: 95%;
  margin: auto;
  /* height: 20px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100px; */
  padding: 3px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.desc span {
  font-size: 10px;
  padding: 1px 2px 1px 2px;
  background-color: rgb(13, 128, 13);
  color: #ffff;
}
.new-price {
  font-size: 20px;
  color: red;
}
.same {
  display: flex;
  justify-content: space-between;
  padding-right: 5px;
}
.same span:nth-of-type(1) {
  padding: 4px 8px 4px 8px;
  font-size: 10px;
  color: rgb(126, 126, 126);
}
.same span:nth-of-type(2) {
  padding: 4px 8px 4px 8px;
  /* display: inline-block; */
  background-color: rgba(202, 202, 202, 0.295);
  font-size: 12px;
  border-radius: 26px;
}
</style>